<template>
    <div>
        <my-form-drawer :title="title" :width="500" :visible="visible" :layout="layout" @ok="save" @cancel="onClose">
            <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules">
                <a-form-model-item label="角色名称" prop="name">
                    <a-input v-model="form.name" :maxLength="10"/>
                </a-form-model-item>
                <a-form-model-item label="角色描述" prop="remark">
                    <a-textarea v-model="form.remark" allow-clear  :maxLength="80" :autosize="{ minRows: 4, maxRows: 6 }"/>
                </a-form-model-item>
            </a-form-model>
        </my-form-drawer>
    </div>
</template>

<script>
    import {add} from  '@/services/role'
    import MyFormDrawer from '@/components/drawer/MyFormDrawer'

    export default {
        name: "addRoleForm",
        components: {MyFormDrawer},
        props: {
            visible: {
                type: Boolean,
                required: false,
                default: false
            },
        },
        data(){
            return{
                title:'新增角色',
                layout:'vertical',
                form: {
                    name:'',
                    remark:'',
                    enabled:true,
                    sortNo:1
                },
                rules:{
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' },
                    ]
                },
            }
        },
        methods:{
            onClose() {
                this.$refs.ruleForm.clearValidate()
                this.$refs.ruleForm.resetFields()
                this.$emit('closeAddForm',false)
            },
            save(){
                this.$refs.ruleForm.validate(valid =>{
                    if(!valid){
                        return false
                    }
                    if(valid){
                        add(this.form).then( res => {
                            console.log(res);
                            if(res.data.code === 0){
                                this.$message.success('添加成功')
                                this.onClose()
                            }
                        })
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>
